<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>任务详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <style>
      .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
        padding: 6px 10px;
      }
      .mui-popover {
      				height: 50px;
              width: 200px;
      			}
    </style>
  </head>

  <body>
    <div class="container" id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">任务详情</h1>
        <!-- <a class="mui-pull-right iconfont icon-bianji mui-right-icon" href="#topPopover"> 操作</a> -->
      </header>
      <!--右上角弹出菜单-->
      <div class="mui-content bg-white" style="padding-bottom: 60px;">
        <div class="content-Title">
          <span class="titleB">基本信息</span>
        </div>
        <div class="content">
          <div class="item flex">
            <div class="text-grey">任务ID:</div>
            <div class="text-black">{{detail.id}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">任务人:</div>
            <div class="text-black flex-sub">{{detail.createUserName}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">发起时间:</div>
            <div class="text-black flex-sub">{{time(detail.createDate)}}</div>
          </div>
          <br>

        </div>
        <div class="content-Title">
          <span class="titleB">任务信息</span>
        </div>
        <div class="content">
          <div class="item flex">
            <div class="text-grey">目标设备:</div>
            <div class="text-black">{{detail.targetName}} {{detail.mdmCode}} {{detail.areaName}}</div>
          </div>
          <div class="item flex">
            <div class="text-grey">任务类型:</div>
            <div class="text-black">模型变更</div>
          </div>
          <div class="item flex">
            <div class="text-grey">任务描述:</div>
            <div class="text-black"></div>
          </div>

        </div>
        <div class="content-Title">
          <span class="titleB">任务状态</span>
        </div>
        <div class="content">
          <div class="item flex">
            <div class="flex-sub text-grey">任务状态: <span class="text-orange">{{ renderStatus(detail.status) }}</span></div>
          </div>
        </div>
      </div>
      <div class="footer fixed shadow">
        <div class="flex justify-center">
          <!-- <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">缓存任务信息</button>
          <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">缓存档案信息</button> -->
          <button type="button" class="mui-btn mui-btn-primary" @tap="submit()">完成任务</button>
        </div>
      </div>
      <div class="popUp" id="popUp" style="display: none;">
        <form action="" class="popUpContent">
          <div class="item flex">
            <div class="label">审批：</div>
            <div class="flex">
              <div class="mui-input-row mui-radio mui-left">
                <label>通过</label>
                <input name="radio1" type="radio">
              </div>
              <div class="mui-input-row mui-radio mui-left">
                <label>未通过</label>
                <input name="radio1" type="radio" checked>
              </div>
            </div>
          </div>
          <div class="item flex">
            <div class="label">意见：</div>
            <div class="flex-sub ">
              <textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
            </div>
          </div>
          <div class="item flex">
            <div class="label"></div>
            <div class="flex-sub flex">
              <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined flex-sub">取消</button>
              <button type="button" class="mui-btn mui-btn-primary flex-sub">确认</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../js/sqlite.js"></script>
    <script type="text/javascript">
      mui.init()
      var mask = null;
      var detailVm = null;
      var cv = null; // 当前webview
      var pageId = ""; //获取详情id
      var bdName = "files"; //数据库的名字
      var taskName = "offlineMytask"; //责任人的名字
      mui.plusReady(function() {
        cv = plus.webview.currentWebview();
        pageId = cv.pageId || '';
        detailVm.isDetail = cv.isDetail;
        console.log(pageId)
        detailVm.getDetail(pageId);
        if (!validBdOpen(bdName)) {
          createDb(bdName)
        }
      })
      detailVm = new Vue({
        el: "#container",
        data: {
          detail: {},
          form: {
            taskId: '',
            status: '',
            remark: '',

          },
          list: [],
          isOffline: false,
          isDetail: 1
        },
        created: function() {},
        methods: {
          getDetail: function(pageId) {
            plus.nativeUI.showWaiting('加载中...');
            var that = this
            selectListSQL(bdName, "select * from " + taskName + " WHERE id ='" + pageId + "'", function(data) {
              if (data.length > 0) {
                console.log(JSON.stringify(data))
                that.detail=JSON.parse(data[0].detail)
                plus.nativeUI.closeWaiting();
              }
            });
          },
          renderStatus(status) {
            status = Number(status)
            switch (status) {
              case 1:
                return "办理中";
              case 2:
                return "已驳回";
              case 3:
                return "已通过";
              case 4:
                return "已完成";
            }
          },
          resultStatus(status) {
            switch (status) {
              case 0:
                return "已驳回";
              case 1:
                return "已通过";
              default:
                return "";
            }
          },
          time(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var mon = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
          },
          approve() {
            mui('#popUp').popover('show');
          },
          cancle() {
            mui('#popUp').popover('toggle');
          },
          submit() {
            if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
              mui.toast('请在有网的状态下做提交！')
              return
            }
            var that = this;
            var btnArray = ['取消', '确定'];
            mui.confirm('确定完成此任务吗？', '提示', btnArray, function(e) {
              if (e.index == 1) {

                plus.nativeUI.showWaiting('提交中...');
                mui.baseApp.httpRequst("/api/task/finish/task/" + that.detail.id, {}, function(data) {
                  selectListSQL(bdName, "delete from " + taskName + " WHERE id ='" + that.detail.id + "'", function(data) {});
                  var opener = plus.webview.currentWebview().opener();
                  var id = opener.id
                  page = plus.webview.getWebviewById(id);
                  mui.fire(page, 'update');
                  plus.nativeUI.closeWaiting();
                  plus.webview.currentWebview().close();
                }, function() {
                  plus.nativeUI.closeWaiting();
                  console.log("提交失败");
                })
              } else {

              }
            })

          }
        },


      })
    </script>
  </body>

</html>
